<template>
	<el-row>
		<el-header style="background-color: white">
			<label class="subtitle"> 社员管理 </label>
			<el-form :inline="true" :model="formInline" class="pull-right">
				<el-form-item label="姓名">
					<el-input v-model="formInline.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getLists()">搜索</el-button>
					<el-button type="primary" @click="newUser(),dialogTableVisible = true">新增</el-button>
				</el-form-item>
			</el-form>
		</el-header>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="number" label="学号">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="department" label="班级">
			</el-table-column>
			<el-table-column prop="major" label="专业">
			</el-table-column>
			<el-table-column prop="phone" label="性别">
			</el-table-column>
			<el-table-column prop="sex" label="联系方式">
			</el-table-column>
			<el-table-column prop="remarks" label="备注">
			</el-table-column>
			<el-table-column  label="操作" align="center" fixed="right" width="200px"  v-if=" this.$cookie.get('type')!=3">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="编辑" placement="top">
						<el-button  type="primary" icon="el-icon-edit" circle size="small" @click="detailUser(scope.$index, scope.row),dialogTableVisible = true"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="移除" placement="top">
						<el-button type="danger" icon="el-icon-error" circle size="small" @click="refuseUser(scope.$index, scope.row)"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<el-pagination class="pull-right" :current-page="page" :page-sizes="[10, 50, 100, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange">
		</el-pagination>
		<!-- 编辑用户详细信息 -->
		<el-dialog title="社员信息" :visible.sync="dialogTableVisible" width="35%">
			<el-form ref="userForm" :model="userForm" label-width="80px" size="mini">
				<el-form-item label="学号" >
					<el-input v-model="userForm.number" ></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="userForm.name"></el-input>
				</el-form-item>
				<el-form-item label="班级">
					<el-input v-model="userForm.department"></el-input>
				</el-form-item>
				<el-form-item label="专业">
					<el-input v-model="userForm.major"></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="userForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="职位">
					<el-radio-group v-model="userForm.type" :disabled="isShow&&userForm.type>3">
						<el-radio :label="3">高级社员</el-radio>
						<el-radio :label="5" :disabled="isShow">社长</el-radio>
						<el-radio :label="2">初级社员</el-radio>
						<!-- <el-radio :label="4" :style="{'display':this.isType==4?'':'none'}">副社长</el-radio> -->
						<el-radio :label="4" :disabled="isShow">副社长</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input type="age" v-model="userForm.age"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userForm.sex">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="userForm.password"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="userForm.remarks"></el-input>
				</el-form-item>
				<el-form-item label="加入时间">
					<el-date-picker v-model="userForm.jointime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					 placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="注册时间" :style="{'display':userForm.id==0 ?'none':'block'}">
					<el-date-picker type="datetime" v-model="userForm.dateline" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					 placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :style="{'display':this.isType==4&&userForm.type<4||this.isType==5 ?'':'none'}" @click="updateUser">{{userForm.id==0?"新增":"修改"}}</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</el-row>
</template>
<script>
	export default {
		data() {
			return {
				isShow: true,
				isType: 3,
				page: 1,
				total: 10,
				tableData: [],
				formInline: {
					name: ''
				},
				userForm: {
					id: 0,
					number: 0,
					name: "",
					department: "",
					major: "",
					phone: "",
					sex: "",
					age: "",
					type: 2,
					remarks: "",
					password: "",
					dateline: "",
					jointime: ""
				},
				dialogTableVisible: false
			}
		},
		methods: {
			//--------------------------------------------------------------------
			//编辑用户
			//--------------------------------------------------------------------
			detailUser(index, row) {
				this.userForm.id = row.id
				this.userForm.number = row.number
				this.userForm.name = row.name
				this.userForm.department = row.department
				this.userForm.major = row.major
				this.userForm.phone = row.phone
				this.userForm.sex = row.sex
				this.userForm.type = row.type
				this.userForm.age = row.age
				this.userForm.remarks = row.remarks
				this.userForm.jointime = row.jointime
				this.userForm.dateline = row.dateline
			},
			//--------------------------------------------------------------------
			//新增用户
			//--------------------------------------------------------------------
			newUser() {
				this.userForm.id = 0
				this.userForm.number = ""
				this.userForm.name = ""
				this.userForm.department = ""
				this.userForm.major = ""
				this.userForm.phone = ""
				this.userForm.sex = "男"
				this.userForm.type = ""
				this.userForm.age = ""
				this.userForm.remarks = ""
				this.userForm.jointime = ""
				this.userForm.dateline = ""
			},
			//--------------------------------------------------------------------
			//更新页面数据
			//--------------------------------------------------------------------
			getLists() {
				console.log("123#"+this.$cookie.get("type"))
				if(this.$cookie.get("type")==3){
					this.$axios({
						method: 'get',
						url: '/user/data',
						params: {
							type: 2,
							name: this.formInline.name.trim(),
							page: this.page,
						}
					}).then(res => {
						this.tableData = res.data.data
						this.total = res.data.total
					}).catch(err => {
						this.$message(err)
					})
				}else{
					this.$axios({
						method: 'get',
						url: '/user/data',
						params: {
							gteType: 2,
							name: this.formInline.name.trim(),
							page: this.page,
						}
					}).then(res => {
						this.tableData = res.data.data
						this.total = res.data.total
					}).catch(err => {
						this.$message(err)
					})
				}
				
			},
			//--------------------------------------------------------------------
			//拒绝用户加入社团
			//--------------------------------------------------------------------
			refuseUser(index, row) {
				this.$confirm('此操作将拒绝此用户加入, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: 'post',
						url: '/user/save',
						params: {
							id: row.id,
							type: 0
						}
					}).then(res => {
						if (res.data.state == true) {
							this.$message({
								type: 'info',
								message: '已拒绝该同学加入社团'
							})
							this.getLists()
						} else {
							this.$message("服务器错误，请重试")
						}
					}).catch(err => {
						this.$message(err)
					})
				})

			},
			//--------------------------------------------------------------------
			//修改用户
			//--------------------------------------------------------------------
			updateUser() {
				if (!(/^[1-9][0-9]{4,10}$/.test(this.userForm.number))) {
					this.$message("请输入正确的学号(5-11位数字)!")
				} else if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(this.userForm.name))) {
					this.$message("请输入正确的姓名(2-4位汉字)!")
				} else if (!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(this.userForm.department))) {
					this.$message("请输入正确的班级(2-10位字符)!")
				} else if (!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(this.userForm.major))) {
					this.$message("请输入正确的专业(2-10位字符)!")
				} else if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(this.userForm.phone))) {
					this.$message("请输入正确的手机号(如:18600000000)")
				} else if (!(/^[1-9][0-9]{0,2}$/.test(this.userForm.age))) {
					this.$message("请输入正确的年龄(1-3位数字)!")
				} else {
					
					if (this.userForm.password.length == 0) {
						this.userForm.password = null
					}
					this.$axios({
						method: 'post',
						url: '/user/save',
						params: {
							id: this.userForm.id,
							number: this.userForm.number,
							password: this.userForm.password,
							name: this.userForm.name,
							department: this.userForm.department,
							major: this.userForm.major,
							type: this.userForm.type,
							phone: this.userForm.phone,
							sex: this.userForm.sex,
							age: this.userForm.age,
							remarks: this.userForm.remarks,
							jointime: this.userForm.jointime,
							dateline: this.userForm.dateline
						}
					}).then(res => {
						if (res.data.state) {
							this.getLists()
							this.dialogTableVisible = false
							if (this.userForm.id == 0) {
								this.$message("新增成功")
							} else {
								this.$message("修改成功")
							}
						} else {
							if (this.userForm.id == 0) {
								this.$message(res.data.msg)
							} else {
								this.$message(res.data.msg)
							}
						}
					}).catch(err => {
						this.$message(err)
					})
				}
			},
			//--------------------------------------------------------------------
			//删除用户
			//--------------------------------------------------------------------
			delUser(index, row) {
				this.$message("删除用户")
			},
			//--------------------------------------------------------------------
			//添加当前条数并刷新当前页面数据
			//--------------------------------------------------------------------
			saveUser() {
				this.$axios({
					method: 'post',
					url: '/user/save',
					params: {
						number: this.userForm.number,
						password: this.userForm.password,
						name: this.userForm.name,
						department: this.userForm.department,
						major: this.userForm.major,
						type: this.userForm.type,
						phone: this.userForm.phone,
						sex: this.userForm.sex,
						age: this.userForm.age,
						remarks: this.userForm.remarks,
						jointime: this.userForm.jointime
					}
				}).then(res => {
					console.log(res.data)
					this.getLists()
				}).catch(err => {
					this.$message(err)
				})
			},
			//--------------------------------------------------------------------
			//更新当前条数并刷新当前页面数据
			//--------------------------------------------------------------------
			handleSizeChange(total) {
				this.total = total
				this.getLists()
			},
			//--------------------------------------------------------------------
			//更新当前条页并刷新当前页面数据
			//--------------------------------------------------------------------
			handleCurrentChange(page) {
				this.page = page
				this.getLists()
			}
		},
		created() {
			//--------------------------------------------------------------------
			//初始化页面数据
			//--------------------------------------------------------------------
			this.isShow = parseInt(this.$cookie.get("type")) == 4
			this.isType = parseInt(this.$cookie.get("type"))
			
			if(this.$cookie.get("type")==3){
				this.$axios({
					method: 'get',
					url: '/user/data',
					params: {
						type: 2,
						name: this.formInline.name.trim(),
						page: this.page,
					}
				}).then(res => {
					this.tableData = res.data.data
					this.total = res.data.total
				}).catch(err => {
					this.$message(err)
				})
			}else{
				this.$axios({
					method: 'get',
					url: '/user/data',
					params: {
						gteType: 2,
						name: this.formInline.name.trim(),
						page: this.page,
					}
				}).then(res => {
					this.tableData = res.data.data
					this.total = res.data.total
				}).catch(err => {
					this.$message(err)
				})
			}
			
		}

	}
</script>
